<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item>#{element.notesTable!}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <!-- 搜索 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-row class="search_row">
                        <el-col :span="6" class="search_title">
                            <div>标识:</div>
                        </el-col>
                        <el-col :span="18" class="scroll_input">
                            <el-input
                                    placeholder="请输入${element.notesTable!}"
                                    size="mini"
                                    clearable
                                    v-model=""
                            >
                            </el-input>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6">
                    <div class="search_row">
                        <el-button type="primary" size="mini">搜索</el-button>
                        <el-button type="success" size="mini" @click="addEdit({name:'添加',type:false })">添加</el-button>
                    </div>

                </el-col>
            </el-row>
            <!-- 数据 -->
            <el-table :data="dictList" stripe size='mini'
                      :cell-style="{'text-align':'center'}"
                      :header-cell-style="{background:'rgb(17,23,57)','text-align':'center'}">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="dictKey" label="字典标识"></el-table-column>
                <el-table-column prop="value" label="值"></el-table-column>
                <el-table-column prop="type" label="类型">
                    <template slot-scope="scope">
                        　<span v-if="scope.row.type=== 1">系统变量</span>
                        　<span v-if="scope.row.type=== 2">用户变量</span>
                        　<span v-if="scope.row.type=== 3">字典类型</span>
                    </template>
                </el-table-column>
                <el-table-column prop="typeCodeName" label="类型编码"></el-table-column>
                <el-table-column prop="dictState" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.dictState=== 1">开启</span>
                        　<span v-if="scope.row.dictState=== 2">关闭</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="描述"></el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="查看"
                                placement="top-start"
                                :enterable="false"
                        >
                            <el-button icon="el-icon-view" size="mini" @click="addEdit({name:'查看',type:true ,id:scope.row.id})"></el-button>
                        </el-tooltip>
                        <!-- 修改 -->
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="编辑"
                                placement="top-start"
                                :enterable="false"
                        >
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="addEdit({name:'更新',type:false ,id:scope.row.id})"></el-button>
                        </el-tooltip>
                        <!-- 删除 -->
                        <el-tooltip
                                class="item"

                                effect="dark"
                                content="删除"
                                placement="top-start"
                                :enterable="false"

                        >
                            <el-button type="danger" v-if="scope.row.type===2" icon="el-icon-delete" size="mini"
                                       @click="del(scope.row.id)"></el-button>
                        </el-tooltip>

                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[10,20, 30, 40, 50]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
            ></el-pagination>

        </el-card>
    </div>
</template>

<script>

    import {queryDishesDictList,removeByIdDishesDict} from '../../api/dictApi'

    export default {
        name: "dictList",
        data() {
            return {
                dictList: [],
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                dictInfo: {
                    page: {
                        current: 1,
                        size: 10
                    }
                }
            }
        },
        methods: {
            // 监听每页展示的条数
            handleSizeChange(newSize) {
                this.dictInfo.page.size = newSize
                this.queryPage()
            },
            //监听页码
            handleCurrentChange(newCurrent) {
                this.dictInfo.page.current = newCurrent
                this.queryPage()
            },
            del(item) {
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    removeByIdDishesDict(item).then(res => {
                        //if (res.code != 20000) this.$message.error(res.message)
                        this.queryPage()
                        return this.$notify({title: '成功', message: res.message, type: 'success'});
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            queryPage() {
                queryDishesDictList(this.dictInfo).then(res => {
                    //if (res.code != 20000) this.$message.error(res.message)
                    this.dictList = res.data.dataList.records
                    this.page.total = res.data.dataList.total
                    this.page.current = res.data.dataList.current
                    this.page.size = res.data.dataList.size
                })
            },
            addEdit(res){
                this.$router.push({path:'/dictAddAndDict',query: { name: res.name,type:res.type,id:res.id }})
            }
        },
        created() {
            this.queryPage()
        },
        del(){

        }
    }
</script>

<style lang="less" scoped>
    .search_row {
        padding: 10px;

    .search_title {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 10px;
        margin-bottom: 20px;
    }

    .scroll_input {
        height: 30px;
    }
    }

</style>
